<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>好味道</title>
  <link rel="icon" href="./../images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <!--element-ui的样式-->
  <script src="../api/main.js"></script>

  <link rel="stylesheet" href="../styles/vant.min.css"/>
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />

<!--  <link rel="stylesheet" href="../styles/main.css" />-->

<!--  <link rel="stylesheet" href="../styles/index.css" />-->
  <style>
    .spans{
      margin-top: 10px;
    }
    .spans span{
      padding: 0 5px;
      display: inline-block;
      background: #a4a3a3;
      height: 25px;
      color: #2a2a2a;
      line-height: 25px;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
    }
    .search{
      display: flex;
      height: 50px;
      line-height:50px ;
      align-items: center;
      padding-left:5px ;
    }
    .search .pros{
      width: 100%;
    }
    .list{
      margin-top: 10px;
    }
    body{
      background: #fdfdfd;
    }
    .lists li{
      padding: 10px;
      height: 30px;
      background: #fff;
      border-top: 1px solid  #fdfdfd;
      line-height: 30px;
    }
    .lists li span{
      float: right;
      margin-right: 15px;
    }


    .shop .box .text .spans{
      height: 15px;background:#c57b35;display: inline-block;padding: 0 3px;border-radius: 4px
    }

    img{
      width: 100%;
    }
    .spans span{
      margin-right: 5px;
      margin-bottom: 5px;
    }
    .shop .box {
      display: flex;
      position: relative;
      height: 115px;
      background: #ffffff;
      border-radius: 10px;
      /*overflow: hidden;*/
      padding: 5px;
    }
    img{
      width: 100%;
    }
    /*.shop .box .imgs{*/
    /*  float: left;*/
    /*  height: 115px;*/
    /*  width: 115px;*/
    /*  border-radius: 10px;*/
    /*  overflow: hidden;*/
    /*}*/
    /*.shop .box .imgs img{*/
    /*  width: 115px;*/
    /*  height: 115px;*/
    /*}*/
    /*.shop .box .text p{*/
    /*  margin-top: 0;*/
    /*}*/
    body{
      background: #f7f7f7;
    }
    .el-icon-arrow-left{
      background: #fff;
      height: 100%;
      line-height: 54px;
    }
    .search{
      padding-left: 0;
    }
    #main .dialogFlavor {
      opacity: 1;
      background: #ffffff;
      border-radius: 10px;
    }

    #main .dialogFlavor .dialogTitle {
      margin-top: 26px;
      margin-bottom: 14px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 500;
      color: #333333;
      letter-spacing: 0;
      text-align: center;
    }

    #main .dialogFlavor .divContent {
      margin-left: 15px;
      margin-right: 15px;
    }

    #main .dialogFlavor .divContent .divFlavorTitle {
      height: 20px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #666666;
      line-height: 20px;
      letter-spacing: 0;
      margin-left: 5px;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    #main .dialogFlavor .divContent span {
      display: inline-block;
      height: 30px;
      opacity: 1;
      background: #ffffff;
      border: 1px solid #ffc200;
      border-radius: 7px;
      line-height: 30px;
      padding-left: 13px;
      padding-right: 13px;
      margin: 0 5px 10px 5px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #333333;
    }

    #main .dialogFlavor .divContent .spanActive {
      background: #ffc200;
      font-weight: 500;
    }

    #main .dialogFlavor .divBottom {
      margin-top: 20px;
      margin-bottom: 19px;
      margin-left: 20px;
      display: flex;
      position: relative;
    }

    #main .dialogFlavor .divBottom div:first-child {
      height: 30px;
      opacity: 1;
      font-size: 20px;
      font-family: DIN, DIN-Medium;
      font-weight: 500;
      text-align: left;
      color: #e94e3c;
      line-height: 30px;
      letter-spacing: 0;
    }

    #main .dialogFlavor .divBottom div span {
      font-size: 14px;
    }

    #main .dialogFlavor .divBottom div:last-child {
      width: 100px;
      height: 30px;
      opacity: 1;
      background: #ffc200;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      position: absolute;
      right: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 500;
      text-align: center;
      color: #333333;
    }

    #main .dialogFlavor .divFlavorClose {
      /*position: absolute;*/
      /*bottom: -70px;*/
      /*left: 50%;*/
      transform: translate(-50%, 0);
    }

    #main .dialogFlavor .divFlavorClose img {
      width: 44px;
      height: 44px;
    }
    .clost{
      padding: 5px;
      border-radius: 5px;
      width: 40px;
      height: 20px;
      position: absolute;
      right: 5px;
      top: 10px;
      /*transform: translate(-50%);*/
      background: rgba(29, 29, 29, 0.2);
      line-height: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="main">
  <van-dialog v-model="dialogFlavor.show" :show-confirm-button="false" class="dialogFlavor" ref="flavorDialog">
    <div class="dialogTitle">{{dialogFlavor.name}}</div>
    <div class="divContent">
      <div v-for="flavor in dialogFlavor.flavors" :key="flavor.id">
        <div class="divFlavorTitle">{{flavor.name}}</div>
        <span v-for="item in JSON.parse(flavor.value)"
              :key="item"
              @click="flavorClick(flavor,item)"
              :class="{spanActive:flavor.dishFlavor === item}"
        >{{item}}</span>
      </div>
    </div>
    <div class="divBottom">
      <div><span class="spanMoney">￥</span>{{dialogFlavor.price/100}}</div>
      <div @click="dialogFlavorAddCart">加入购物车</div>
    </div>

    <div class="clost" @click="dialogFlavor.show = false">取消</div>

  </van-dialog>

  <div class="search">
    <span @click="iconbtn" class="el-icon-arrow-left"></span>
    <van-search class="pros" v-model="value" placeholder="请输入搜索关键词" />
  </div>
  <div v-if="brand.length==0" class="box">
    <div class="all">
      <p style=" font-weight: 600;margin: 0;">热门搜索</p>
      <div class="spans">
        <span @click="spansbtn(item.name)" v-for="(item,index) in hotfood.data" :key="index">{{item.name}}</span>
      </div>
    </div>

  </div>
  <div v-else class="list">
    <div class="shop">
      <div class="box" v-for="(item,index) in brand" :key="index">
        <div class="imgs" style=" float: left;
      height: 115px;
      width: 115px;
      border-radius: 10px;
      overflow: hidden;">
          <img :src="'/common/download?name=' + item.image" style="width: 115px;
      height: 115px;">
        </div>
        <div class="text" style="float: left;
      margin-left: 10px;display: inline-block;width: 250px">
          <span @click="btn(item)" class="span" style="  position: absolute;
      height: 20px;
      width: 60px;
      right: 15px;
      bottom: 15px;
      display: inline-block;
      background: #daaa43;
      font-size: 10px;
      line-height: 20px;
      text-align: center;
      border-radius: 10px;">选择规格</span>
          <p style="font-weight: 600;margin-top: 0;margin-bottom: 7px;color: #3a8ee6;font-size: 16px" >{{item.name}}</p>
          <p style="font-size: 13px;display: inline-block;margin-top: 0;margin-bottom: 7px;color: #5a5e66;height: 21px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.description}}</p>
          <p style="font-size: 13px;margin-top: 0;margin-bottom: 14px;color: #5a5e66">销量：{{item.saleNum}}</p>
          <p style="color: #ee0a24;margin-top: 0">￥<span style="color: #ee0a24;font-size: 20px">{{item.price/100}}</span> </p>
        </div>
      </div>
  </div>
  </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>

<script src="./../js/request.js"></script>

<script src="../api/food.js"></script>

<script src="../js/jquery-2.1.0.js"></script>

<script>
  new Vue({
    el:'#main',
    data(){
      return {
        //口味
        dialogFlavor:{
          name:'',
          flavors:[],
          dishId:undefined,
          price:undefined,
          show:false,
          image:''
        },
        timeout:null,
        footList:{},
        hotfood:{},
        num: 1,
        imageURL:"../images/img/null16293c9294000199.jpg",
        value:'',
        brand:[]
      }
    },
    methods:{
      //点击选择口味
      btn(item){
        console.log(item)
        this.dialogFlavor = {
          name:'',
          flavors:[],
          dishId:undefined,
          price:undefined,
          show:false
        }
        this.dialogFlavor={
          name:item.name,
          flavors:item.flavors,
          dishId:item.id,
          price:item.price,
          show:true,
          image:item.image
        }
        for(var i=0;i<this.dialogFlavor.flavors.length;i++){
          let arr=JSON.parse(this.dialogFlavor.flavors[i].value)
          this.dialogFlavor.flavors[i].dishFlavor=arr[0]
        }
      },
      //选择规格加入购物车
      dialogFlavorAddCart(){
        const dialogFlavor = this.dialogFlavor
        let flag = true
        let dishFlavor = []
        dialogFlavor.flavors.forEach(item=>{
          if(item.dishFlavor){
            dishFlavor.push(item.dishFlavor)
          }else{
            flag = false
            Notify({ type: 'warning', message: '请选择'+ item.name });
          }
        })
        if(flag){
          this.addCart({
            price:dialogFlavor.price,
            dishFlavor:dishFlavor.join(","),
            id:dialogFlavor.dishId,
            flavors:[],
            image:dialogFlavor.image,
            name:dialogFlavor.name
          })
          this.dialogFlavor.show = false
        }
      },

      //选择具体的口味
      flavorClick(flavor,item){
        flavor.dishFlavor = item
        //强制刷新dialog的dom
        this.dialogFlavor.show = false
        this.dialogFlavor.show = true
      },

      //菜单中往购物车中添加商品
      async addCart(item) {
        let params = {
          amount: item.price / 100,//金额
          dishFlavor: item.dishFlavor,//口味  如果没有传undefined
          dishId: undefined,//菜品id
          setmealId: undefined,//套餐id
          name: item.name,
          image: item.image
        }
        console.log("---------------购物车")
        console.log(params)
        if (Array.isArray(item.flavors)) {//表示是菜品
          params.dishId = item.id
        } else {//表示套餐 套餐没有口味
          params.setmealId = item.id
        }
        const res = await addCartApi(params)
      },

      spansbtn(name){
        this.value=name
      },

      handleChange(value) {
        console.log(value);
      },
      iconbtn(){
        window.location.href="../index.html";
      },

      //节流函数
      debounce(newVlaue) {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(async () => {
          // 有些需要防抖的工作，在这里执行
          console.log(newVlaue)
         if(newVlaue!=null){
           this.brand=await foodshopserch({name:newVlaue})
           this.brand = this.brand.data
           console.log("防抖成功！");
         }
        }, 500);
      }
    },
    computed:{

    },
    watch:{
      //根据输入框变化发出请求获取列表数据
      async value(newValue) {
       // if(this.value!=''){
       //
       // }
       // else{
       //   this.brand=[]
       // }
        this.debounce(newValue)
      }
    },
    async created(){
      this.hotfood=await foodGoods()
    },
    async mounted(){
    },
  })
</script>
</body>
</html>